{extend name="v1/layout/base"}
{block name="content"}
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
      <form class="layui-card-body layui-form layui-form-pane">
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">广告名称：</label>
            <div class="layui-input-block">
              <input type="text" name="banner_name" lay-verify="required" lay-reqtext="请输入广告名称" placeholder="请输入广告名称" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">所属广告位：</label>
            <div class="layui-input-block">
              <select name="banner_type_id" lay-verify="required" lay-reqtext="请选择所属广告位" lay-search>
                <option value="">请选择所属广告位</option>
                {volist name="$banner_type_list" id="vo"}
                <option value="{$vo.banner_type_id}">{$vo.banner_type_name}</option>
                {/volist}
              </select>
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">广告类型：</label>
            <div class="layui-input-block">
              <input type="radio" name="show_type" lay-filter="show_type" value="1" title="图片" checked>
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item fileurlupload">
          <div class="layui-col-lg8">
            <label class="layui-form-label">图片广告：</label>
            <div class="layui-input-block">
              <div class="layui-upload">
                <div class="xk-big-show" datasrc="__COMMON__images/no_pic.png">
                  <input type="hidden" class="xk-picurl" name="fileurl" value="">
                  <img class="layui-upload-img  xk-img upload-pic" id="img-show-1" src="__COMMON__images/no_pic.png" width="100px" height="100px">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item show_pic_html">

        </div>
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">商品ID：</label>
            <div class="layui-input-block">
              <input type="text" name="linkurl" placeholder="请输入ID" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">跳转方式：</label>
            <div class="layui-input-block">
              <select name="target" lay-verify="required" lay-reqtext="请选择跳转方式" lay-search>
                <option value="none" >不跳转</option>
                <!-- <option value="product_list">产品列表</option> -->
                <option value="product_show">产品详情</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">排序ID：</label>
            <div class="layui-input-block">
              <input type="text" name="order_id" lay-verify="required" lay-reqtext="请输入排序id" value="0" placeholder="请输入排序id" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item">
          <div class="layui-col-lg8">
            <label class="layui-form-label">是否显示：</label>
            <div class="layui-input-block">
              <input type="radio" name="status" value="1" title="显示" checked>
              <input type="radio" name="status" value="0" title="不显示" >
            </div>
          </div>
        </div>
        <!-- 底部操作按钮 -->
        <div class="layui-row">
          <div class="layui-col-xs3">&nbsp;</div>
          <div class="layui-col-xs4">
            <input type="hidden" name="act" value="create" />
            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" id="backList"><i class="layui-icon">&#xe65c;</i>返回列表</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" lay-submit lay-filter="saveBtn"><i class="layui-icon">&#xe609;</i>立即更新</button>
          </div>
          <div class="layui-col-xs5">&nbsp;</div>
        </div>
        <!-- 底部操作按钮结束 -->
      </form>
  </div>
</div>
{/block}
{block name="myScript"}
<script>
  layui.use(['form','upload'], function() {
    var form = layui.form,
      upload = layui.upload,
      layer = layui.layer,
      $ = layui.$;
    form.on('radio(show_type)', function (data) {
      var html = '';
      var show_pic_html = '';
      switch (data.value) {
        case '1':
          html += '<div class="layui-col-lg8"><label class="layui-form-label">图片广告：</label><div class="layui-input-block"><div class="layui-upload"><div class="xk-big-show" datasrc="__COMMON__images/no_pic.png"><input type="hidden" class="xk-picurl" name="fileurl" value=""><img class="layui-upload-img  xk-img upload-pic" id="img-show-1" src="__COMMON__images/no_pic.png" width="100px" height="100px"></div></div></div></div>';
          break;
        case '2':
          html += '<div class="layui-col-lg8"><label class="layui-form-label">视频广告：</label><div class="layui-input-block xk-upload-video"><div class="layui-upload-drag" id="xk-videoUpload"><i class="layui-icon"></i><p>点击上传，或将文件拖拽到此处</p><div class="layui-hide" id="uploadDemoView"><hr><img src="" alt="上传成功后渲染" style="max-width: 196px"></div><input type="hidden" name="fileurl" value=""></div></div></div>';
          show_pic_html += '<div class="layui-col-lg8"><label class="layui-form-label">首帧封面图：</label><div class="layui-input-block"><div class="layui-upload"><div class="xk-big-show" datasrc="__COMMON__images/no_pic.png"><input type="hidden" class="xk-picurl" name="show_pic_url" value=""><img class="layui-upload-img  xk-img upload-pic" id="img-show-1" src="__COMMON__images/no_pic.png" width="100px" height="100px"></div></div></div></div>';
          break;
      }
      $(".fileurlupload").html(html);
      $(".show_pic_html").html(show_pic_html);
      // 图片上传 普通版 不带裁剪
      var uploadInst = upload.render({
        elem: '.upload-pic',
        url: '/common/Upload/uploadImg',
        before: function(obj) {
          layer.load(2); //上传loading
        },
        done: function(res) {
          layer.closeAll('loading');
          var item = this.item;
          if(res.code != 200){
            layer.msg(res.msg);
          }
          if(res.result_code != 200){
            layer.msg(res.result_msg);
          }
          var button = '<button class="layui-btn layui-btn-danger layui-btn-sm xk-del-pic" type="button" name="button"><i class="layui-icon">&#xe640;</i></button>';
          item.attr('src',res.resultData['upload_url']);
          item.siblings('.xk-picurl').val(res.resultData['show_url']);
          item.parent('.xk-big-show').attr('datasrc',res.resultData['upload_url']);
          item.parent('.xk-big-show').parent('.layui-upload').append(button);
        },
        error: function(res) {
          layer.closeAll('loading');
        }
      });
      // 视频上传处理
      var videoInst = upload.render({
        elem: '#xk-videoUpload',
        url: '/common/Upload/uploadVideo', //改成您自己的上传接口
        accept: 'video',
        before: function(obj) {
          layer.load(2); //上传loading
        },
        done: function(res) {
          layer.closeAll('loading');
          var item = this.item;
          if(res.code != 200){
            layer.msg(res.msg);
          }
          if(res.result_code != 200){
            layer.msg(res.result_msg);
          }
          var html = '<video controls=""><source src="'+res.resultData['show_url']+'" type="video/mp4"></video> <input type="hidden" name="fileurl" class="xk-upload-url" value="'+res.resultData['upload_url']+'" />';
          var button = '<button class="layui-btn layui-btn-danger layui-btn-sm xk-del-video" type="button" name="button"><i class="layui-icon">&#xe640;</i></button>';
          item.html(html);
          item.parent('.xk-upload-video').append(button);
        },
        error: function(res) {
          layer.closeAll('loading');
        }
      });
  });
    //监听提交
    form.on('submit(saveBtn)', function(data) {
      var data = data.field,
          url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Banner/save')}";
      https(url, data, 'post', 1, '正在保存信息').then(res => {
        xkMsg(res.result_msg);
      }, fail => {})
      return false;
    });
  });
</script>
{/block}
